Ant Design Vue — Date Picker and Form

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Extra Footer on the Date Picker

We can add an extra footer on the date picker by populating the renderExtraFooter slot:

<template>
  <div>
    <a-date-picker>
      <template slot="renderExtraFooter">extra footer</template>
    </a-date-picker>
  </div>
</template>

We can do the same with the a-range-picker , a-week-picker , and a-month-picker .

Date Picker Date Format

We can format the date picker’s date format our way with Moment:

<template>
  <div>
    <a-date-picker :default-value="moment('2020/01/01', dateFormat)" :format="dateFormat"/>
    <br>
    <a-date-picker
      :default-value="moment('01/01/2020', dateFormatList[0])"
      :format="dateFormatList"
    />
    <br>
    <a-month-picker :default-value="moment('2020/01', monthFormat)" :format="monthFormat"/>
    <br>
    <a-range-picker
      :default-value="[moment('2020/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
      :format="dateFormat"
    />
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      dateFormatList: ["DD/MM/YYYY", "DD/MM/YY"]
    };
  },
  methods: {
    moment
  }
};
</script>

We just set the string of the date format and it’ll be formatted.

Date Picker Size

The date picker size can be changed with the size prop:

<template>
  <div>
    <a-date-picker size="large"/>
    <br>
    <a-month-picker size="large" placeholder="Select Month"/>
    <br>
    <a-range-picker size="large"/>
    <br>
    <a-week-picker size="large" placeholder="Select Week"/>
  </div>
</template>
<script>
export default {};
</script>

Time Picker

We can add a time picker to a a-date-picker and a-range-picker with the show-time prop:

<template>
  <div>
    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk"/>
    <br>
    <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @change="onChange"
      @ok="onOk"
    />
  </div>
</template>
<script>
export default {
  methods: {
    onChange(value, dateString) {
      console.log("Selected Time: ", value);
      console.log("Formatted Selected Time: ", dateString);
    },
    onOk(value) {
      console.log("onOk: ", value);
    }
  }
};
</script>

The show-time prop can take an object with the time format.

Form

We can add a simple form with the a-form component:

<template>
  <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="Note">
      <a-input
        v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      />
    </a-form-item>
    <a-form-item label="Gender">
      <a-select
        v-decorator="[
          'gender',
          { rules: [{ required: true, message: 'Please select your gender!' }] },
        ]"
        placeholder="Select a option and change input text above"
        @change="handleSelectChange"
      >
        <a-select-option value="male">male</a-select-option>
        <a-select-option value="female">female</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" })
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
        }
      });
    },
    handleSelectChange(value) {
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`
      });
    }
  }
};
</script>

We add the a-input to add the input.

The v-decorator has the rules for validation for the field.

The this.form.setFieldsValue method sets the form field value.

The this.form reactive property is created by the this.$form.createForm method.

Conclusion

We can add forms and date pickers with the components provided by Ant Design Vue.